<template>
    <div class="map-box">
        <div class="geoMap"
            id="geoMap"></div>
    </div>
</template>

<script>
import * as d3 from 'd3'

export default {
    name: 'mapIndex',
    data() {
        return {
            width: 0,
            height: 0,
            projection: null,
            path: null
        }
    },
    components: {
    },
    methods: {
        initD3() {
            this.width = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) * 0.98
            this.height = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) * 0.98
            this.projection = d3.geoMercator()
                .center([107, 31]) // lng lon
                .scale(this.height * 0.9)
                .translate([this.width / 2, this.height / 2])
            this.path = d3.geoPath()
                .projection(this.projection)
            this.renderD3()
        },
        renderD3() {
            d3.json('/static/json/ChinaMap.json').then(geo => {
                let svgMap = d3.select('#geoMap').append('svg')
                    .attr('width', this.width)
                    .attr('height', this.height)

                svgMap.selectAll('path')
                    .data(geo.features)
                    .enter()
                    .append('path')
                    .attr('class', 'province')
                    .style('fill', (d, i) => {
                        return 'rgba(0,' + parseFloat(255 - Math.random() * 50) + ',' + parseFloat(255 - Math.random() * 100) + ')'
                    })
                    .attr('d', this.path)
            })
        }
    },
    created() {
        this.initD3()
    }
}
</script>

<style lang="scss" scoped>
</style>
